
<!-- GetRecommendNotesPage.vue -->
<template>
  <div class="container">
    <div class="input-wrapper">
      <span class="input-label">关键字</span>
<!--      <el-input v-model="keywordInput" placeholder="请输入推荐搜索关键词" @keyup.enter="handleKeywordClick" />-->
<!--  自动补全输入框    -->
      <el-autocomplete
          v-model="keywordInput"
          :fetch-suggestions="querySearch"
          placeholder="请输入推荐搜索关键词"
          @select="handleKeywordClick"
          :trigger-on-focus="false"
          @keyup.enter="handleKeywordClick"
      />
      <el-button type="primary" @click="handleKeywordClick" :loading="keywordLoading" >抓取数据</el-button>
    </div>
    <xhs-table-vue :table-data="keywordTableData" :loading="keywordLoading" ></xhs-table-vue>
  </div>
</template>

<script setup>
import { getNoteByKeyword } from '@/api/xhs'
import {onMounted, ref, watch} from 'vue'
import xhsTableVue from '@/components/Table/XhsTableVue.vue'
import { ElMessage } from 'element-plus'
const keywordLoading = ref(false)
const keywordInput = ref('')
const keywordTableData = ref([])
const keywordRecommendation = ref(null)
import { getKeywordRecommendation } from '@/api/utils.js'

const loadAll = async () =>{
  let result = await getKeywordRecommendation()
  if(result.status === 200){
    let data = result.data
    // console.log(data)
    const uniqueValues = new Set();
    const uniqueData = data.filter(item => {
      if (!uniqueValues.has(item.keyword)) {
        uniqueValues.add(item.keyword);
        return true;
      }
      return false;
    }).map(item => ({ value: item.keyword }));

    // console.log("去重并重新构建后的数据:", uniqueData);

    keywordRecommendation.value = uniqueData;
  }
}
let timeout;
const querySearch = (queryString, cb) => {
  const results = queryString
      ? keywordRecommendation.value.filter(createFilter(queryString))
      : keywordRecommendation.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString) => {
  return (keyword) => {
    return (
        //restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0

        keyword.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1 //只要包括
    )
  }
}
const handleKeywordClick = async () => {
  try {
    // 请求的时候如果表格中有数据，那么就清空原来的数据
    if(keywordTableData.value.length > 0){
      keywordTableData.value = []

    }
    const input = keywordInput.value.trim()
    if(input === ''){
        ElMessage({
          message: '输入字段不能为空!',
          type: 'warning',
        })
    }else {
      keywordLoading.value = true
      if(!keywordRecommendation.value.some(item => item.value.toLowerCase().includes(input.toLowerCase()))){
        console.log(keywordRecommendation.value)
        ElMessage.error(`数据库中未查找到"${input}="关键字,请到任务中心发布之后再查看`)
        return
      }
      const result = await getNoteByKeyword(input)
      const data = result['data']
      // console.log(data)
      keywordTableData.value = data
    }
  } catch (error) {
    console.log(error)
  } finally {
    keywordLoading.value = false
  }
}
onMounted(async ()=>{
  await loadAll()
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}
.input-wrapper {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.input-label {
  width: fit-content;
  padding: 5px;
  font-size: 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
</style>
